<!DOCTYPE html>
<html lang="en-US" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>框架布局 | 知否</title>
	<style>
		body,html{
		    scroll-behavior: smooth;
		}
	</style>
    <meta name="description" content="Just playing around.">
    <meta name="generator" content="VitePress v1.0.1">
    <link rel="preload stylesheet" href="/dist/assets/style.BAFIH5E8.css" as="style">
    
    <script type="module" src="/dist/assets/app.Ct44-VeG.js"></script>
    <link rel="preload" href="/dist/assets/inter-roman-latin.Bu8hRsVA.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/dist/assets/chunks/framework.CSGcjqEA.js">
    <link rel="modulepreload" href="/dist/assets/chunks/theme.CTRrYzfQ.js">
    <link rel="modulepreload" href="/dist/assets/页面布局.md.ByxvjOf0.lean.js">
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body>
    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0f60ec36></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0f60ec36> Skip to content </a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar top" data-v-ae24b3ad data-v-ccf7ddec><div class="wrapper" data-v-ccf7ddec><div class="container" data-v-ccf7ddec><div class="title" data-v-ccf7ddec><div class="VPNavBarTitle" data-v-ccf7ddec data-v-ab179fa1><a class="title" href="/dist/" data-v-ab179fa1><!--[--><!--]--><!----><span data-v-ab179fa1>知否</span><!--[--><!--]--></a></div></div><div class="content" data-v-ccf7ddec><div class="content-body" data-v-ccf7ddec><!--[--><!--]--><div class="VPNavBarSearch search" data-v-ccf7ddec><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-ccf7ddec data-v-7f418b0f><span id="main-nav-aria-label" class="visually-hidden" data-v-7f418b0f>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/dist/" tabindex="0" data-v-7f418b0f data-v-9c663999><!--[--><span data-v-9c663999>首页</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-7f418b0f data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-b6c34ac9><span class="text" data-v-b6c34ac9><!----><span data-v-b6c34ac9>前端开发</span><span class="vpi-chevron-down text-icon" data-v-b6c34ac9></span></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><div class="items" data-v-e7ea1737><!--[--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./html.html" data-v-43f1e123><!--[-->HTML<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./css.html" data-v-43f1e123><!--[-->CSS<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./js.html" data-v-43f1e123><!--[-->JavaScript<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./es6.html" data-v-43f1e123><!--[-->ECMAScript6<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./ts.html" data-v-43f1e123><!--[-->TypeScript<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./git.html" data-v-43f1e123><!--[-->Git<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./react.html" data-v-43f1e123><!--[-->React<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./vue2.html" data-v-43f1e123><!--[-->Vue2<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./vue3.html" data-v-43f1e123><!--[-->Vue3<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./node.html" data-v-43f1e123><!--[-->Node.js<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./%E5%B0%8F%E7%A8%8B%E5%BA%8F.html" data-v-43f1e123><!--[-->微信小程序开发<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./uniapp.html" data-v-43f1e123><!--[-->UniApp<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="./%E5%85%AC%E4%BC%97%E5%8F%B7%E5%BC%80%E5%8F%91.html" data-v-43f1e123><!--[-->公众号开发<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-7f418b0f data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-b6c34ac9><span class="text" data-v-b6c34ac9><!----><span data-v-b6c34ac9>PHP</span><span class="vpi-chevron-down text-icon" data-v-b6c34ac9></span></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><div class="items" data-v-e7ea1737><!--[--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/PHP%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA.html" data-v-43f1e123><!--[-->环境搭建<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/PHP%E8%AF%AD%E6%B3%95.html" data-v-43f1e123><!--[-->PHP语法<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/mysql.html" data-v-43f1e123><!--[-->Mysql<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/PHP%E5%BA%94%E7%94%A8.html" data-v-43f1e123><!--[-->PHP应用<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/Composer.html" data-v-43f1e123><!--[-->Composer<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/Thinkphp5.html" data-v-43f1e123><!--[-->Thinkphp5.0<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/Laravel8.5.html" data-v-43f1e123><!--[-->Laravel5.6<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-7f418b0f data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-b6c34ac9><span class="text" data-v-b6c34ac9><!----><span data-v-b6c34ac9>网络技术</span><span class="vpi-chevron-down text-icon" data-v-b6c34ac9></span></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><div class="items" data-v-e7ea1737><!--[--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/tcpip.html" data-v-43f1e123><!--[-->TCP/IP协议<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/%E5%B8%B8%E8%A7%81%E7%BD%91%E7%BB%9C%E5%91%BD%E4%BB%A4.html" data-v-43f1e123><!--[-->常见网络命令<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C.html" data-v-43f1e123><!--[-->计算机网络<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-7f418b0f data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-b6c34ac9><span class="text" data-v-b6c34ac9><!----><span data-v-b6c34ac9>运维技术</span><span class="vpi-chevron-down text-icon" data-v-b6c34ac9></span></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><div class="items" data-v-e7ea1737><!--[--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/%E8%BF%90%E7%BB%B4%E6%8A%80%E6%9C%AF.html" data-v-43f1e123><!--[-->运维技术<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/AD%E5%9F%9F.html" data-v-43f1e123><!--[-->AD域<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup active" data-v-7f418b0f data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-b6c34ac9><span class="text" data-v-b6c34ac9><!----><span data-v-b6c34ac9>知识碎片</span><span class="vpi-chevron-down text-icon" data-v-b6c34ac9></span></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><div class="items" data-v-e7ea1737><!--[--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link active" href="/dist/%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80.html" data-v-43f1e123><!--[-->页面布局<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/Grid.html" data-v-43f1e123><!--[-->Grid 网格布局<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/Flex%E5%B8%83%E5%B1%80.html" data-v-43f1e123><!--[-->Flex 布局<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/less.html" data-v-43f1e123><!--[-->Less<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/Sass.html" data-v-43f1e123><!--[-->Sass<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/canvas.html" data-v-43f1e123><!--[-->Canvas<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/JavaScirpt.html" data-v-43f1e123><!--[-->JS文档<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/node%E7%8E%AF%E5%A2%83.html" data-v-43f1e123><!--[-->Node环境搭建<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/jq.html" data-v-43f1e123><!--[-->JQuery笔记<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/echarts.html" data-v-43f1e123><!--[-->Echarts<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/nginx.html" data-v-43f1e123><!--[-->Nginx<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/wordpress.html" data-v-43f1e123><!--[-->WordPress<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/linux.html" data-v-43f1e123><!--[-->Linux<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-7f418b0f data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-b6c34ac9><span class="text" data-v-b6c34ac9><!----><span data-v-b6c34ac9>资料分享</span><span class="vpi-chevron-down text-icon" data-v-b6c34ac9></span></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><div class="items" data-v-e7ea1737><!--[--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1ZRR5l9UMSE99cwLruO9tbA#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->TCP/IP协议<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1LAkV5vQZR1QSyUlv0V6tzQ#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->网络工程师<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1mZ6v2Mv0clzMv5tT6_Sobg" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->Linux镜像<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1tByRfM5z4vLywmTt206YZg" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->Web开发电子书<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1zMu6k27Nc6dONGYU8HkC3g#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->心理学电子书<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1xiefaWxBqawjg3amStiEKg#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->摄影教程<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/17o_LlD0vxgobMb7e1uXgew#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->系统激活工具<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1rIBUwPMCTZfPaXI7_HDQ4Q#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->office软件<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1WSR2TY7-a7PqWB3gYDMv2Q#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->计算机维修教程<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1q5OUrn1k2KTMo6ODU2p9cg#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->英语资料<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1PWLQ5T3PYL5af6Kfo_3NRg#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->简历模板<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1w0MpJVWiZG5DWj5JjuB74A#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->教资<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/18rxOl7mgSa7jo_QNoXlVOQ#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->网络工程实战<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1bgoxESvPMmjY6-qHFvj8TQ#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->安防弱点资料<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1JWyRm9L_J1-tU5Ee18ud_Q#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->Adobe软件<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1PXBqWDf4qtIjiVVlijxQtQ#list/path=%2F" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->PPT模板<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link vp-external-link-icon" href="https://pan.baidu.com/s/1Y8q4vXkx9FUpi0U3a7rJKw" target="_blank" rel="noreferrer" data-v-43f1e123><!--[-->软考系统集成<!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-e7ea1737 data-v-43f1e123><a class="VPLink link" href="/dist/ChatGPT.html" data-v-43f1e123><!--[-->ChatGPT<!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-ccf7ddec data-v-e6aabb21><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-e6aabb21 data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-ccf7ddec data-v-d0bd9dde data-v-b6c34ac9><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b6c34ac9><span class="vpi-more-horizontal icon" data-v-b6c34ac9></span></button><div class="menu" data-v-b6c34ac9><div class="VPMenu" data-v-b6c34ac9 data-v-e7ea1737><!----><!--[--><!--[--><!----><div class="group" data-v-d0bd9dde><div class="item appearance" data-v-d0bd9dde><p class="label" data-v-d0bd9dde>Appearance</p><div class="appearance-action" data-v-d0bd9dde><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-d0bd9dde data-v-d1f28634 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-d1f28634></span><span class="vpi-moon moon" data-v-d1f28634></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-ccf7ddec data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-ccf7ddec><div class="divider-line" data-v-ccf7ddec></div></div></div><!----></header><div class="VPLocalNav empty fixed" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><!----><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-d2ecc192><button data-v-d2ecc192>Return to top</button><!----></div></div></div><!----><div class="VPContent" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" role="navigation" data-v-3f215769 data-v-935f8a84><div class="content" data-v-935f8a84><div class="outline-marker" data-v-935f8a84></div><div class="outline-title" role="heading" aria-level="2" data-v-935f8a84>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-935f8a84><span class="visually-hidden" id="doc-outline-aria-label" data-v-935f8a84> Table of Contents for current page </span><ul class="VPDocOutlineItem root" data-v-935f8a84 data-v-b933a997><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _dist_%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80" data-v-39a288b8><div><h2 id="reset-css-样本" tabindex="-1">reset.css 样本 <a class="header-anchor" href="#reset-css-样本" aria-label="Permalink to &quot;reset.css 样本&quot;">​</a></h2><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>/* http://meyerweb.com/eric/tools/css/reset/ </span></span>
<span class="line"><span>   v2.0 | 20110126</span></span>
<span class="line"><span>   License: none (public domain)</span></span>
<span class="line"><span>*/</span></span>
<span class="line"><span></span></span>
<span class="line"><span>/* 重置样式 */</span></span>
<span class="line"><span></span></span>
<span class="line"><span>html, body, div, span, applet, object, iframe,</span></span>
<span class="line"><span>h1, h2, h3, h4, h5, h6, p, blockquote, pre,</span></span>
<span class="line"><span>a, abbr, acronym, address, big, cite, code,</span></span>
<span class="line"><span>del, dfn, em, img, ins, kbd, q, s, samp,</span></span>
<span class="line"><span>small, strike, strong, sub, sup, tt, var,</span></span>
<span class="line"><span>b, u, i, center,</span></span>
<span class="line"><span>dl, dt, dd, ol, ul, li,</span></span>
<span class="line"><span>fieldset, form, label, legend,</span></span>
<span class="line"><span>table, caption, tbody, tfoot, thead, tr, th, td,</span></span>
<span class="line"><span>article, aside, canvas, details, embed, </span></span>
<span class="line"><span>figure, figcaption, footer, header, hgroup, </span></span>
<span class="line"><span>menu, nav, output, ruby, section, summary,</span></span>
<span class="line"><span>time, mark, audio, video {</span></span>
<span class="line"><span>    margin: 0;</span></span>
<span class="line"><span>    padding: 0;</span></span>
<span class="line"><span>    border: 0;</span></span>
<span class="line"><span>    font-size: 100%;</span></span>
<span class="line"><span>    font: inherit;</span></span>
<span class="line"><span>    vertical-align: baseline;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>/* HTML5 display-role reset for older browsers */</span></span>
<span class="line"><span>article, aside, details, figcaption, figure, </span></span>
<span class="line"><span>footer, header, hgroup, menu, nav, section {</span></span>
<span class="line"><span>    display: block;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>ol, ul {</span></span>
<span class="line"><span>    list-style: none;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>blockquote, q {</span></span>
<span class="line"><span>    quotes: none;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>blockquote:before, blockquote:after,</span></span>
<span class="line"><span>q:before, q:after {</span></span>
<span class="line"><span>    content: &#39;&#39;;</span></span>
<span class="line"><span>    content: none;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span>table {</span></span>
<span class="line"><span>    border-collapse: collapse;</span></span>
<span class="line"><span>    border-spacing: 0;</span></span>
<span class="line"><span>}</span></span>
<span class="line"><span></span></span>
<span class="line"><span>html{</span></span>
<span class="line"><span>    /* 16px = 1rem */</span></span>
<span class="line"><span>    font-size: 16px;</span></span>
<span class="line"><span>    user-select: none;</span></span>
<span class="line"><span>}</span></span></code></pre></div><hr><h2 id="响应式布局" tabindex="-1">响应式布局 <a class="header-anchor" href="#响应式布局" aria-label="Permalink to &quot;响应式布局&quot;">​</a></h2><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。</span></span>
<span class="line"><span>通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。</span></span>
<span class="line"><span></span></span>
<span class="line"><span>优点：</span></span>
<span class="line"><span>面对不同分辨率设备灵活性强</span></span>
<span class="line"><span>能够快捷解决多设备显示适应问题</span></span>
<span class="line"><span></span></span>
<span class="line"><span>缺点：</span></span>
<span class="line"><span>兼容各种设备工作量大，效率低下</span></span>
<span class="line"><span>代码累赘，会出现隐藏无用的元素，加载时间加长</span></span>
<span class="line"><span>其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果</span></span>
<span class="line"><span>一定程度上改变了网站原有的布局结构，会出现用户混淆的情况</span></span>
<span class="line"><span></span></span>
<span class="line"><span>说到响应式布局，就不得不提起CSS3中的Media Query（媒介查询）</span></span>
<span class="line"><span>使用这个工具，我们可以非常方便快捷的制造出各种丰富的实用性强的界面。</span></span></code></pre></div><hr><h2 id="视口viewport" tabindex="-1">视口viewport <a class="header-anchor" href="#视口viewport" aria-label="Permalink to &quot;视口viewport&quot;">​</a></h2><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>视口指的是移动设备中的设备屏幕窗口。            </span></span>
<span class="line"><span>在移动端浏览器当中，存在着两种视口：        </span></span>
<span class="line"><span>一种是可见视口（也就是我们说的设备大小），另一种是视窗视口（网页的宽度是多少）。     </span></span>
<span class="line"><span></span></span>
<span class="line"><span>什么是可见视口，什么又是视窗视口呢？此处举一个例子：</span></span>
<span class="line"><span>如果我们的屏幕是320像素*480像素的大小（iPhone4）</span></span>
<span class="line"><span>假设在浏览器中，320像素的屏幕宽度能够展示980像素宽度的内容</span></span>
<span class="line"><span>那么320像素的宽度就是可见视口的宽度，而能够显示的980像素的宽度就是视窗视口的宽度。      </span></span>
<span class="line"><span></span></span>
<span class="line"><span>为了显示更多的内容，大多数的浏览器会把自己的视窗视口扩大，</span></span>
<span class="line"><span>简易的理解，就是让原本320像素的屏幕宽度能够容下980像素甚至更宽的内容（将网页等比例缩小）。       </span></span>
<span class="line"><span></span></span>
<span class="line"><span>常见viewport数值        </span></span>
<span class="line"><span>iPhone：980            </span></span>
<span class="line"><span>iPad：1024            </span></span>
<span class="line"><span>Android：980            </span></span>
<span class="line"><span>WinPhone：1024</span></span></code></pre></div><table><thead><tr><th style="text-align:center;">参数</th><th style="text-align:center;">说明</th></tr></thead><tbody><tr><td style="text-align:center;">width</td><td style="text-align:center;">viewport的宽度</td></tr><tr><td style="text-align:center;">height</td><td style="text-align:center;">viewport的高度</td></tr><tr><td style="text-align:center;">initial-scale</td><td style="text-align:center;">初始的缩放比例</td></tr><tr><td style="text-align:center;">minimum-scale</td><td style="text-align:center;">允许用户缩放到的最小比例</td></tr><tr><td style="text-align:center;">maximum-scale</td><td style="text-align:center;">允许用户缩放到的最大比例</td></tr><tr><td style="text-align:center;">user-scalable</td><td style="text-align:center;">用户是否可以手动缩放</td></tr></tbody></table><hr><h2 id="将视口设置为320像素" tabindex="-1">将视口设置为320像素 <a class="header-anchor" href="#将视口设置为320像素" aria-label="Permalink to &quot;将视口设置为320像素&quot;">​</a></h2><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>&lt;meta　name=&quot;viewport&quot;　content= &quot;width=320&quot; /&gt;</span></span></code></pre></div><hr><h2 id="将视口设置为设备宽度" tabindex="-1">将视口设置为设备宽度 <a class="header-anchor" href="#将视口设置为设备宽度" aria-label="Permalink to &quot;将视口设置为设备宽度&quot;">​</a></h2><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>&lt;meta　name=&quot;viewport&quot;　content= &quot;width=device-width&quot; /&gt;</span></span></code></pre></div><hr><h2 id="将视口设置为设备宽度-并在最初的时候以放大2倍的方式显示" tabindex="-1">将视口设置为设备宽度，并在最初的时候以放大2倍的方式显示 <a class="header-anchor" href="#将视口设置为设备宽度-并在最初的时候以放大2倍的方式显示" aria-label="Permalink to &quot;将视口设置为设备宽度，并在最初的时候以放大2倍的方式显示&quot;">​</a></h2><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>&lt;meta　name=&quot;viewport&quot;　content= &quot;width=device-width, initial-scale=2.0&quot;　/&gt;</span></span></code></pre></div><hr><h2 id="将视口设置为设备宽度-并允许缩放-最大放大到2倍-最小缩小到1-2" tabindex="-1">将视口设置为设备宽度，并允许缩放，最大放大到2倍，最小缩小到1/2 <a class="header-anchor" href="#将视口设置为设备宽度-并允许缩放-最大放大到2倍-最小缩小到1-2" aria-label="Permalink to &quot;将视口设置为设备宽度，并允许缩放，最大放大到2倍，最小缩小到1/2&quot;">​</a></h2><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>&lt;meta　name=&quot;viewport&quot;　content= &quot;width=device-width, maximum-scale=2.0,　minimum-scale=0.5&quot; /&gt;</span></span></code></pre></div><hr><h2 id="将视口设置为设备宽度-并禁止缩放" tabindex="-1">将视口设置为设备宽度，并禁止缩放 <a class="header-anchor" href="#将视口设置为设备宽度-并禁止缩放" aria-label="Permalink to &quot;将视口设置为设备宽度，并禁止缩放&quot;">​</a></h2><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>&lt;meta　name=&quot;viewport&quot;　content= &quot;width=device-width, user-scalable=no&quot;　/&gt;</span></span></code></pre></div><h1 id="框架布局" tabindex="-1">框架布局 <a class="header-anchor" href="#框架布局" aria-label="Permalink to &quot;框架布局&quot;">​</a></h1><blockquote><h2 id="ui框架的分类" tabindex="-1">UI框架的分类 <a class="header-anchor" href="#ui框架的分类" aria-label="Permalink to &quot;UI框架的分类&quot;">​</a></h2></blockquote><ul><li>PC端UI框架</li><li>移动端UI框架</li><li>基于逻辑类封装UI框架</li><li>市面上的开发框架是非常之多的，有的类型框架甚至有几千种之多，对于开发者们来说是学不完 所以我们学习这些框架只要学习如何使用，以及如何快速开发就足以了 我们后面主要是介绍Bootstrap主流框架为主,其他的同类型框架希望大家能够举一反三</li></ul><h2 id="pc端ui框架" tabindex="-1">PC端UI框架 <a class="header-anchor" href="#pc端ui框架" aria-label="Permalink to &quot;PC端UI框架&quot;">​</a></h2><blockquote><ul><li>Bootstrap</li><li>LayUI</li><li>Amaze UI</li><li>ZUI</li></ul></blockquote><h2 id="移动端ui框架" tabindex="-1">移动端UI框架 <a class="header-anchor" href="#移动端ui框架" aria-label="Permalink to &quot;移动端UI框架&quot;">​</a></h2><blockquote><ul><li>MUI</li><li>WeUI(微信端)</li><li>framework7</li><li>Ionic</li></ul></blockquote><h2 id="基于逻辑类封装ui框架" tabindex="-1">基于逻辑类封装UI框架 <a class="header-anchor" href="#基于逻辑类封装ui框架" aria-label="Permalink to &quot;基于逻辑类封装UI框架&quot;">​</a></h2><blockquote><ul><li>Element UI</li><li>Vant</li><li>uView</li><li>View UI</li></ul></blockquote><h2 id="常用ui框架" tabindex="-1">常用UI框架 <a class="header-anchor" href="#常用ui框架" aria-label="Permalink to &quot;常用UI框架&quot;">​</a></h2><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>我们在做页面布局的时候，往往需要快速开发，那么显然用纯HTML + CSS 布局速度会比较慢</span></span>
<span class="line"><span>所以我们可以选用UI框架来进行布局    </span></span>
<span class="line"><span></span></span>
<span class="line"><span>选用UI框架进行布局的优缺点</span></span>
<span class="line"><span>    优点：</span></span>
<span class="line"><span>        快速开发，很多UI元素已经被定义好了</span></span>
<span class="line"><span>        平时花一个上午做好的界面，利用框架后我们可以缩减到1-2小时内就能完成</span></span>
<span class="line"><span></span></span>
<span class="line"><span>    缺点：</span></span>
<span class="line"><span>        样式风格比较统一固定，若要改成自己的结构需要覆盖框架的样式</span></span>
<span class="line"><span>        所有需要更深的样式层级来覆盖</span></span>
<span class="line"><span></span></span>
<span class="line"><span></span></span>
<span class="line"><span>UI框架的组成部分</span></span>
<span class="line"><span>    1、常见的UI元素</span></span>
<span class="line"><span>        其实就是html标签的封装</span></span>
<span class="line"><span></span></span>
<span class="line"><span>    2、常用的页面组件</span></span>
<span class="line"><span>        页面当中经常出现的模块例如：字体图标、导航条、面包屑导航、时间轴、分页、进度条...等等</span></span>
<span class="line"><span></span></span>
<span class="line"><span>    3、常用的页面特效</span></span>
<span class="line"><span>        页面当中经常出现的特效例如：懒加载、选项卡、轮播图、弹出框、下拉菜单、手风琴....等等</span></span></code></pre></div><p>响应式设计详解</p><p>导读</p><ul><li>响应式网页设计是什么</li><li>实现响应式网页设计的方法</li><li>响应式网站案例</li><li>viewport是什么</li><li>设置viewport</li><li>Media Query是什么</li><li>设置Media Query的三种用法</li><li>媒体查询的语法</li><li>常见媒体类型</li><li>常见媒体特性</li><li>常见逻辑运算符</li><li>媒体查询示例</li><li>工具</li></ul><h2 id="知识点" tabindex="-1">知识点 <a class="header-anchor" href="#知识点" aria-label="Permalink to &quot;知识点&quot;">​</a></h2><ol><li>什么是响应式网页设计</li><li>物理像素是什么</li><li>逻辑像素是什么</li><li>像素比是什么 （像素比 = 物理像素 / 逻辑像素 )</li><li>如何查询像素比</li><li>如何查询你手机屏幕的逻辑像素( 逻辑像素 = 物理像素 / 像素比)</li><li>viewport是什么</li><li>如何设置viewport</li><li>iOS的视口默认多宽</li><li>媒体查询是什么</li><li>媒体查询的用法有几种</li><li>媒体查询由哪两部分构成</li><li>媒体查询的语法是什么</li><li>实现响应式网页设计的步骤</li><li>媒体查询的逻辑运算符有哪几个</li><li>使用min-width和max-width设置断点时的原则是什么？</li></ol><h2 id="响应式网页设计是什么" tabindex="-1">响应式网页设计是什么 <a class="header-anchor" href="#响应式网页设计是什么" aria-label="Permalink to &quot;响应式网页设计是什么&quot;">​</a></h2><ul><li><strong>响应式网页设计是一种设计网页的方法。</strong></li><li><strong>这种方法主要使用媒体查询让网页具有根据设备的类型和特点应用CSS样式的能力。</strong></li></ul><p>解释：</p><ul><li>设计：设想、计划。设计就是把想法实现。</li><li>网页设计：按照一定的想法布局网页内容。</li><li>传统网页设计：主要针对PC端浏览器而设计，不具备响应设备类型和特性的能力，故不能针对多终端设备和尺寸的网页进行优化。</li><li>移动互联网时代：随着HTML 5的视口的出现及CSS3的<code>media</code>规则的出现。网页具备了查询访问设备和设备特性的能力，响应式网页设计应用而生。</li><li>响应：指让我们的网页能够自动查询用户的访问设备，并根据查询结果应用不同的CSS样式。</li></ul><h2 id="实现响应式网页设计的步骤" tabindex="-1">实现响应式网页设计的步骤 <a class="header-anchor" href="#实现响应式网页设计的步骤" aria-label="Permalink to &quot;实现响应式网页设计的步骤&quot;">​</a></h2><p>第一步：设置视口</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;</span></span></code></pre></div><p>第二步：设置媒体查询：使用Media Query判断用户访问设备，从而应用css样式</p><h2 id="案例" tabindex="-1">案例 <a class="header-anchor" href="#案例" aria-label="Permalink to &quot;案例&quot;">​</a></h2><p>非响应式网页设计案例</p><ul><li><a href="https://links.jianshu.com/go?to=http%3A%2F%2Fwww.w3school.com.cn" target="_blank" rel="noreferrer">w3school</a></li></ul><p>响应式网页设计：媒体查询</p><ul><li><a href="https://links.jianshu.com/go?to=https%3A%2F%2Fmi.com" target="_blank" rel="noreferrer">小米</a></li><li><a href="https://links.jianshu.com/go?to=https%3A%2F%2Fwww.geekpark.net" target="_blank" rel="noreferrer">极客公园</a></li><li><a href="https://links.jianshu.com/go?to=https%3A%2F%2Fdribbble.com%2F" target="_blank" rel="noreferrer">https://dribbble.com</a></li><li><a href="https://links.jianshu.com/go?to=https%3A%2F%2Fcolly.com" target="_blank" rel="noreferrer">https://colly.com</a></li></ul><h2 id="viewport是什么" tabindex="-1">Viewport是什么 <a class="header-anchor" href="#viewport是什么" aria-label="Permalink to &quot;Viewport是什么&quot;">​</a></h2><p><strong>viewport就是视口的意思，指移动端渲染网页的区域。</strong> 解释：</p><ul><li>view: 是“看”的意思。</li><li>Port: 是“端口”的意思</li><li>Viewport: 翻译为“视口”。</li><li>viewport是没有大小的。就是viewport不等于网页可见区域的大小。</li><li>视口可以通过<code>meta</code>标签设置</li><li>在进行响应式网页设计的时候，第一步就是设置视口，即把渲染页面的视口尺寸设置为与设备的可见区域的尺寸一致。</li><li>设置viewport的主要目的是为了创建更合理的视口尺寸。设置视口是制作响应式网页的第一步。</li><li>视口是 HTML 5 中的元元素，用于根据用户的设备缩放内容。这对于响应式网页设计很重要。</li></ul><p>PC端视口：指网页的可见区域。移动端的视口与PC端的视口有所不同：</p><table><thead><tr><th style="text-align:left;">浏览器界面</th><th style="text-align:left;">移动端</th><th style="text-align:left;">PC端</th></tr></thead><tbody><tr><td style="text-align:left;">视口定义</td><td style="text-align:left;">渲染页面的区域</td><td style="text-align:left;">网页的可见区域</td></tr><tr><td style="text-align:left;">可见区域</td><td style="text-align:left;">视口不等于可见区域</td><td style="text-align:left;">视口等于可见区域</td></tr><tr><td style="text-align:left;">视口交互</td><td style="text-align:left;">1. 在屏幕上移动页面会出现视觉反馈条 2.更改视口比例：双击、捏合、捏开（不能更改大小) 3.可以设置网页的视口属性</td><td style="text-align:left;">通过调整窗口大小改变视口大小</td></tr></tbody></table><h2 id="设置viewport" tabindex="-1">设置Viewport <a class="header-anchor" href="#设置viewport" aria-label="Permalink to &quot;设置Viewport&quot;">​</a></h2><p>可以通过<code>&lt;meta&gt;</code> 标签设置移动端视口的大小和缩放。</p><p>如果不设置视口的尺寸，移动设备通常会自动优化网页的显示。<strong>在iOS系统上视口默认为980px宽</strong>。如果你希望实现更加复杂合理的优化，通常需要修改移动设备的默认视口设置。</p><p>设置视口属性的语法是：</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>&lt;meta name=&quot;viewport&quot; content=&quot;属性列表&quot; /&gt;</span></span></code></pre></div><p><strong>viewport包含6个属性</strong>：</p><ol><li><code>width</code>：设置视口的宽度。属性值：</li></ol><ul><li>number：1- 10000。数字表示视口的像素宽度，无单位，不支持负值。比如<code>width=600</code></li><li>device-width：等于<strong>100vw</strong>或<strong>100%</strong>。</li></ul><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>&lt;meta name=&quot;viewport&quot; content=&quot;width:320&quot; /&gt;</span></span></code></pre></div><ol><li><code>height</code>：设置视口的高度。属性值：</li></ol><ul><li>number：1- 10000。数字表示视口的像素高度，无单位，不支持负值。比如<code>height=600</code></li><li>device-height：等于<strong>100vw</strong>或<strong>100%</strong>。</li></ul><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>&lt;meta name=&quot;viewport&quot; content=&quot;height:640&quot; /&gt;</span></span></code></pre></div><ol><li><code>initial-scale</code>：控制第一次加载页面时的缩放级别。属性值：</li></ol><ul><li>0.1 - 10</li><li>默认值：1。</li><li>负值：忽略。</li></ul><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>&lt;meta name=&quot;viewport&quot; content=&quot;initial-scale:1&quot; /&gt;</span></span></code></pre></div><ol><li><code>minimum-scale</code>：控制页面上允许的缩小程度。属性值：</li></ol><ul><li>0.1 - 10</li><li>默认值：0.1。</li><li>负值：忽略。</li></ul><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>&lt;meta name=&quot;viewport&quot; content=&quot;minimun-scale:2&quot; /&gt;</span></span></code></pre></div><ol><li><code>maximum-scale</code>：控制页面允许放大多少。属性值</li></ol><ul><li>0.1- 10。</li><li>任何小于 3 的值都无法访问。</li><li>默认值：10。</li><li>负值：忽略。</li></ul><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>&lt;meta name=&quot;viewport&quot; content=&quot;maxinum-scale:6&quot; /&gt;</span></span></code></pre></div><ol><li><code>user-scalable</code>：控制页面上是否允许放大和缩小操作。属性值:</li></ol><ul><li>有效值：0、1、no 或 yes。</li><li>默认值：1，与 yes 相同。</li></ul><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>&lt;meta name=&quot;viewport&quot; content=&quot;user-scalable:yes&quot; /&gt;</span></span></code></pre></div><p>视口的常规设置方法：</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;</span></span></code></pre></div><blockquote><p>警告：1. 将 user-scalable值设置为 0（与否相同）违反了《Web 内容可访问性指南》 Web Content Accessibility Guidelines (WCAG)。2. 使用 user-scalable=no 可能会给有视力障碍（例如低视力）的用户带来可访问性问题。 WCAG 要求至少 2 倍缩放；但是，最佳做法是启用 5 倍变焦</p></blockquote><h2 id="media-query是什么" tabindex="-1">Media Query是什么 <a class="header-anchor" href="#media-query是什么" aria-label="Permalink to &quot;Media Query是什么&quot;">​</a></h2><ul><li>Media Query的中文：媒体查询</li><li>媒体查询是一种查询访问设备的技术。可以查询访问设备的类型和特性，根据媒体查询的结果应用不同的CSS样式。</li></ul><h2 id="媒体查询的三种用法" tabindex="-1">媒体查询的三种用法 <a class="header-anchor" href="#媒体查询的三种用法" aria-label="Permalink to &quot;媒体查询的三种用法&quot;">​</a></h2><p>第一种：通过为<code>&lt;link&gt;</code>标签设置<code>media</code>属性定位媒体，例如</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>&lt;link href=&quot;css/style1.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot; /&gt;</span></span>
<span class="line"><span>&lt;link href=&quot;css/style2.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;all&quot; /&gt;</span></span>
<span class="line"><span>&lt;link href=&quot;css/print.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;print&quot; /&gt;</span></span>
<span class="line"><span>&lt;link href=&quot;phone.css&quot;  rel=&quot;stylesheet&quot; media=&quot;screen and (max-width: 600px)&quot;  /&gt;</span></span></code></pre></div><p>第二种：或通过为<code>&lt;style&gt;</code>标签设置<code>media</code>属性定位媒体，例如：</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>&lt;style type=&quot;text/css&quot; media=&quot;screen&quot;&gt;</span></span>
<span class="line"><span>  @import url(&quot;./css/style.css&quot;); </span></span>
<span class="line"><span>&lt;/style&gt;</span></span></code></pre></div><p>第三种：或通过<code>@media</code>规则在CSS文件中定位媒体，例如</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>/*css文件*/</span></span>
<span class="line"><span>@media not|only 媒体类型 and (媒体特性表达式) {</span></span>
<span class="line"><span>  CSS-Code;</span></span>
<span class="line"><span>}</span></span></code></pre></div><h2 id="媒体查询的语法" tabindex="-1">媒体查询的语法 <a class="header-anchor" href="#媒体查询的语法" aria-label="Permalink to &quot;媒体查询的语法&quot;">​</a></h2><ul><li><p>媒体查询通过可选的<strong>媒体设备</strong>和可选的<strong>媒体特性表达式</strong>组成</p></li><li><p>每个媒体特性表达式必须用括号括起来。</p></li><li><p>媒体设备和媒体特性表达式之间使用</p><p>逻辑运算符</p><p>连接</p><ul><li><code>and</code></li><li><code>not</code></li><li><code>only</code></li><li><code>,</code></li></ul></li><li><p>媒体查询不区分大小写。</p></li></ul><h2 id="媒体类型" tabindex="-1">媒体类型 <a class="header-anchor" href="#媒体类型" aria-label="Permalink to &quot;媒体类型&quot;">​</a></h2><p>媒体类型指常见的媒体设备类型，媒体类型是可选的。</p><ul><li>all： 所有媒体设备。</li><li>print ： 打印机</li><li>screen : 计算机屏幕、平板屏幕、智能手机屏幕等设备屏幕。</li><li>speech: 屏幕阅读设备</li></ul><p>示例：查询打印机设备</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>@media print {</span></span>
<span class="line"><span>  /* … */</span></span>
<span class="line"><span>}</span></span></code></pre></div><p>示例：查询多个设备</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>@media screen, print {</span></span>
<span class="line"><span>  /* … */</span></span>
<span class="line"><span>}</span></span></code></pre></div><h2 id="媒体特性表达式" tabindex="-1">媒体特性表达式 <a class="header-anchor" href="#媒体特性表达式" aria-label="Permalink to &quot;媒体特性表达式&quot;">​</a></h2><p>媒体特性通过表达式形式描述了用户代理、输出设备或环境的特征。</p><p>示例：查询鼠标悬停</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>@media (hover: hover) {</span></span>
<span class="line"><span>  /* … */</span></span>
<span class="line"><span>}</span></span></code></pre></div><p>示例：查询视口宽度</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>@media (max-width: 1250px) {</span></span>
<span class="line"><span>  /* … */</span></span>
<span class="line"><span>}</span></span></code></pre></div><p>示例：查询彩色屏幕的设备</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>@media (color) {</span></span>
<span class="line"><span>  /* … */</span></span>
<span class="line"><span>}</span></span></code></pre></div><p>示例：查询两个特性（and运算符）</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>@media (min-width: 30em) and (orientation: landscape) {</span></span>
<span class="line"><span>  /* … */</span></span>
<span class="line"><span>}</span></span></code></pre></div><h2 id="逻辑运算符" tabindex="-1">逻辑运算符 <a class="header-anchor" href="#逻辑运算符" aria-label="Permalink to &quot;逻辑运算符&quot;">​</a></h2><p>逻辑运算符 not、and 和 only 可用于组成复杂的媒体查询。您还可以通过用逗号分隔多个媒体查询将它们组合成一个规则。</p><p><code>and</code> :用于将多个媒体特征组合到一个媒体查询中，要求每个链接的特征返回 true 以使查询为 true。它还用于将媒体功能与媒体类型连接起来。</p><p><code>not</code>: 用于否定媒体查询，如果查询将返回 false，则返回 true。如果出现在逗号分隔的查询列表中，它只会否定应用它的特定查询。如果使用 not 运算符，还必须指定媒体类型。</p><p><code>only</code>:仅当整个查询匹配时才应用样式。它对于防止旧浏览器应用选定的样式很有用。当不只使用时，旧浏览器会将查询屏幕和 (max-width: 500px) 解释为屏幕，忽略查询的其余部分，并将其样式应用于所有屏幕。如果使用 only 运算符，则还必须指定媒体类型。</p><p><code>,</code>: 逗号用于将多个媒体查询组合成一个规则。逗号分隔列表中的每个查询都与其他查询分开处理。因此，如果列表中的任何查询为真，则整个媒体语句返回真。换句话说，列表的行为类似于逻辑或运算符。</p><p>示例：查询屏幕设备+特性</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>@media screen and (min-width: 30em) and (orientation: landscape) {</span></span>
<span class="line"><span>  /* … */</span></span>
<span class="line"><span>}</span></span></code></pre></div><p>示例：反向查询设备和特性（not 关键字不能用于否定单个特征查询，只能用于否定整个媒体查询)</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>@media only screen and (color) {</span></span>
<span class="line"><span>  /* … */</span></span>
<span class="line"><span>}</span></span></code></pre></div><h2 id="媒体查询示例" tabindex="-1">媒体查询示例 <a class="header-anchor" href="#媒体查询示例" aria-label="Permalink to &quot;媒体查询示例&quot;">​</a></h2><p><strong>一、最大宽度Max Width</strong></p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>&lt;link rel=&quot;stylesheet&quot; media=&quot;screen and (max-width:600px)&quot; href=&quot;small.css&quot; type=&quot;text/css&quot; /&gt;</span></span></code></pre></div><p>上面表示的是：当屏幕小于或等于600px时，将采用small.css样式来渲染Web页面。</p><p><strong>二、最小宽度Min Width</strong></p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>&lt;link rel=&quot;stylesheet&quot; media=&quot;screen and (min-width:900px)&quot; href=&quot;big.css&quot; type=&quot;text/css&quot;  /&gt;</span></span></code></pre></div><p>上面表示的是：当屏幕大于或等于900px时，将采用big.css样式来渲染Web页面。</p><p><strong>三、多个Media Queries使用</strong></p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>&lt;link rel=&quot;stylesheet&quot; media=&quot;screen and (min-width:600px) and (max-width:900px)&quot; href=&quot;style.css&quot; type=&quot;text/css&quot; /&gt;</span></span></code></pre></div><p>Media Query可以结合多个媒体查询，换句话说，一个Media Query可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种Media Type。正如上面的其表示的是当屏幕在600px-900px之间时采用style.css样式来渲染web页面。</p><p><strong>四、设备屏幕的输出宽度Device Width</strong></p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>&lt;link rel=&quot;stylesheet&quot; media=&quot;screen and (max-device-width: 480px)&quot; href=&quot;iphone.css&quot; type=&quot;text/css&quot; /&gt;</span></span></code></pre></div><p>上面的代码指的是iphone.css样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的max-device-width所指的是设备的实际分辨率，也就是指可视面积分辨率</p><p><strong>五、iPhone4</strong></p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>&lt;link rel=&quot;stylesheet&quot; media=&quot;only screen and (-webkit-min-device-pixel-ratio: 2)&quot; type=&quot;text/css&quot; href=&quot;iphone4.css&quot; /&gt;</span></span></code></pre></div><p>上面的样式是专门针对iPhone4的移动设备写的。</p><p><strong>六、iPad</strong></p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>&lt;link rel=&quot;stylesheet&quot; media=&quot;all and (orientation:portrait)&quot; href=&quot;portrait.css&quot; type=&quot;text/css&quot; /&gt; </span></span>
<span class="line"><span>&lt;link rel=&quot;stylesheet&quot; media=&quot;all and (orientation:landscape)&quot; href=&quot;landscape.css&quot;  type=&quot;text/css&quot; /&gt;</span></span></code></pre></div><p>在大数情况下，移动设备iPad上的Safari和在iPhone上的是相同的，只是他们不同之处是iPad声明了不同的方向，比如说上面的例子，在纵向(portrait)时采用portrait.css来渲染页面；在横向（landscape）时采用landscape.css来渲染页面。</p><p><strong>七、android</strong></p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>/*240px的宽度*/</span></span>
<span class="line"><span>&lt;link rel=&quot;stylesheet&quot; media=&quot;only screen and (max-device-width:240px)&quot; href=&quot;android240.css&quot; type=&quot;text/css&quot; /&gt;</span></span>
<span class="line"><span>/*360px的宽度*/</span></span>
<span class="line"><span>&lt;link rel=&quot;stylesheet&quot; media=&quot;only screen and (min-device-width:241px) and (max-device-width:360px)&quot; href=&quot;android360.css&quot; type=&quot;text/css&quot; /&gt;</span></span>
<span class="line"><span>/*480px的宽度*/</span></span>
<span class="line"><span>&lt;link rel=&quot;stylesheet&quot; media=&quot;only screen and (min-device-width:361px) and (max-device-width:480px)&quot; href=&quot;android480.css&quot; type=&quot;text/css&quot; /&gt;</span></span></code></pre></div><p>我们可以使用media query为android手机在不同分辨率提供特定样式，这样就可以解决屏幕分辨率的不同给android手机的页面重构问题。</p><p><strong>八、not关键字</strong></p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>&lt;link rel=&quot;stylesheet&quot; media=&quot;not print and (max-width: 1200px)&quot; href=&quot;print.css&quot; type=&quot;text/css&quot; /&gt;</span></span></code></pre></div><p>not关键字是用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备。</p><p><strong>九、only关键字</strong></p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>&lt;link rel=&quot;stylesheet&quot; media=&quot;only screen and (max-device-width:240px)&quot; href=&quot;android240.css&quot; type=&quot;text/css&quot; /&gt;</span></span></code></pre></div><p>only用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读了样式，因为其先读only而不是screen；另外不支持Media Qqueries的浏览器，不论是否支持only，样式都不会被采用。</p><p><strong>十、其他</strong></p><p>在Media Query中如果没有明确指定Media Type，那么其默认为all，如：</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>&lt;link rel=&quot;stylesheet&quot; media=&quot;(min-width: 701px) and (max-width: 900px)&quot; href=&quot;medium.css&quot; type=&quot;text/css&quot; /&gt;</span></span></code></pre></div><p>另外还有使用逗号（，）被用来表示并列或者表示或，如下</p><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot; media=&quot;handheld and (max-width:480px), screen and (min-width:960px)&quot; /&gt;</span></span></code></pre></div><p>上面代码中style.css样式被用在宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上。</p><h2 id="工具" tabindex="-1">工具 <a class="header-anchor" href="#工具" aria-label="Permalink to &quot;工具&quot;">​</a></h2><ul><li><a href="https://links.jianshu.com/go?to=https%3A%2F%2Fwww.browserstack.com%2Fresponsive" target="_blank" rel="noreferrer">https://www.browserstack.com/responsive</a></li><li><a href="https://links.jianshu.com/go?to=https%3A%2F%2Fui.dev%2Famiresponsive" target="_blank" rel="noreferrer">https://ui.dev/amiresponsive</a></li><li><a href="https://links.jianshu.com/go?to=http%3A%2F%2Fiosres.com%2F" target="_blank" rel="noreferrer">ios分辨率</a></li><li><a href="https://links.jianshu.com/go?to=https%3A%2F%2Fyesviz.com%2F" target="_blank" rel="noreferrer">Screen Dimensions for Devices</a></li><li><a href="https://links.jianshu.com/go?to=http%3A%2F%2Fwww.javascriptkit.com%2Fdhtmltutors%2Fcssmediaqueries2.shtml" target="_blank" rel="noreferrer">width versus device-width</a> <a href="https://links.jianshu.com/go?to=https%3A%2F%2Fviewportsizer.com%2F" target="_blank" rel="noreferrer">https://viewportsizer.com/</a></li></ul><h2 id="移动端rem适配" tabindex="-1">移动端rem适配 <a class="header-anchor" href="#移动端rem适配" aria-label="Permalink to &quot;移动端rem适配&quot;">​</a></h2><div class="language- vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang"></span><pre class="shiki shiki-themes github-light github-dark vp-code"><code><span class="line"><span>rem.js</span></span>
<span class="line"><span>(function(doc, win) {</span></span>
<span class="line"><span>    // html元素字体</span></span>
<span class="line"><span>    // 倍数关系可以修改，此处为25</span></span>
<span class="line"><span>    // 设置为10时, dpr=1的手机, 宽度360, 计算出来html的字体大小为5px, 可能是字体太小了</span></span>
<span class="line"><span>    // 尽量设置大一些, 这样避免12px字体大小的限制</span></span>
<span class="line"><span>    var _rootFontSize = window._rootFontSize || 25;</span></span>
<span class="line"><span>  </span></span>
<span class="line"><span>    // 默认不支持缩放</span></span>
<span class="line"><span>    var _remMetaScalable = typeof window._remMetaScalable === &#39;undefined&#39; </span></span>
<span class="line"><span>      ? false </span></span>
<span class="line"><span>      : !!window._remMetaScalable;</span></span>
<span class="line"><span>  </span></span>
<span class="line"><span>    var docEl = doc.documentElement,</span></span>
<span class="line"><span>      isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),</span></span>
<span class="line"><span>  </span></span>
<span class="line"><span>      // 只针对IOS设备</span></span>
<span class="line"><span>      dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,</span></span>
<span class="line"><span>  </span></span>
<span class="line"><span>      // 计算缩放比</span></span>
<span class="line"><span>      scale = 1 / dpr,</span></span>
<span class="line"><span>  </span></span>
<span class="line"><span>      // 检测支持的&quot;缩放&quot;事件</span></span>
<span class="line"><span>      resizeEvt = &#39;orientationchange&#39; in window ? &#39;orientationchange&#39; : &#39;resize&#39;;</span></span>
<span class="line"><span>    docEl.dataset.dpr = dpr;</span></span>
<span class="line"><span>  </span></span>
<span class="line"><span>    // 被iframe引用时，禁止缩放</span></span>
<span class="line"><span>    dpr = window.top === window.self ? dpr : 1;</span></span>
<span class="line"><span>  </span></span>
<span class="line"><span>    var metaEl = doc.createElement(&#39;meta&#39;);</span></span>
<span class="line"><span>    metaEl.name = &#39;viewport&#39;;</span></span>
<span class="line"><span>    var metaElContent = &#39;width=device-width, &#39;;</span></span>
<span class="line"><span>  </span></span>
<span class="line"><span>    // 支持缩放</span></span>
<span class="line"><span>    if (_remMetaScalable) {</span></span>
<span class="line"><span>      metaElContent += &#39;initial-scale=&#39; + scale;</span></span>
<span class="line"><span>    } else {</span></span>
<span class="line"><span>      metaElContent += (</span></span>
<span class="line"><span>        &#39;initial-scale=&#39; + scale </span></span>
<span class="line"><span>        + &#39;,maximum-scale=&#39; + scale </span></span>
<span class="line"><span>        + &#39;, minimum-scale=&#39; + scale </span></span>
<span class="line"><span>        + &#39;, user-scalable=no&#39;);</span></span>
<span class="line"><span>    }</span></span>
<span class="line"><span>    metaEl.content = metaElContent;</span></span>
<span class="line"><span>    docEl.firstElementChild.appendChild(metaEl);</span></span>
<span class="line"><span>  </span></span>
<span class="line"><span>    // 缩放/旋转设备检测函数</span></span>
<span class="line"><span>    var recalc = function() {</span></span>
<span class="line"><span>      var width = docEl.clientWidth;</span></span>
<span class="line"><span>  </span></span>
<span class="line"><span>      // 750为设计用的宽度, 比如它以iphone6标准(宽750)</span></span>
<span class="line"><span>      // 此时, 按照设计稿的尺寸写就可以了</span></span>
<span class="line"><span>      // 如: 设计稿为100px, 那么就写4rem(100 / 25), 25是自己设置的</span></span>
<span class="line"><span>      // 也可以设置成100, 这样就写100px就写1rem</span></span>
<span class="line"><span>      docEl.style.fontSize = _rootFontSize * (width / 750) + &#39;px&#39;;</span></span>
<span class="line"><span>    };</span></span>
<span class="line"><span>    recalc();</span></span>
<span class="line"><span>  </span></span>
<span class="line"><span>    if (!doc.addEventListener) return;</span></span>
<span class="line"><span>    win.addEventListener(resizeEvt, recalc, false);</span></span>
<span class="line"><span>})(document, window);</span></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-09de1c0f><!--[--><!--]--><!----><!----></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter" data-v-5d98c3a5 data-v-e315a0ad><div class="container" data-v-e315a0ad><p class="message" data-v-e315a0ad><a style="text-decoration: none;" href="http://fxl.web3v.work/images/ewm1.jpg">如有侵权请联系删除!</a></p><p class="copyright" data-v-e315a0ad>知否 © 2010-2023</p></div></footer><!--[--><!--]--></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"flex布局.md\":\"BP87LxcZ\",\"ad域.md\":\"Ct6QumOu\",\"php环境搭建.md\":\"CVn3mOGq\",\"运维技术.md\":\"Dx2197ba\",\"chatgpt.md\":\"116vQvrb\",\"canvas.md\":\"BwWjkpia\",\"wordpress.md\":\"BvKFisN-\",\"常见网络命令.md\":\"h-DLpezj\",\"计算机网络.md\":\"Bz4M_N57\",\"资源.md\":\"DS3xNort\",\"路线.md\":\"Dx-Leifp\",\"链接.md\":\"C2yLG16K\",\"php语法.md\":\"DygtMl6j\",\"php应用.md\":\"3yu1Wkfb\",\"小程序.md\":\"DaQm6-Oa\",\"demo.md\":\"DiAu97_I\",\"node环境.md\":\"CZa20yFJ\",\"mysql.md\":\"BXKoWqoU\",\"公众号开发.md\":\"DxGMsID3\",\"uniapp.md\":\"DtU7Zs8R\",\"linux.md\":\"bMeVK9ek\",\"index.md\":\"fi6iMrxT\",\"tcpip.md\":\"Ci5YZCto\",\"less.md\":\"ISIW88fS\",\"vue2.md\":\"BnnFont-\",\"grid.md\":\"CSGL2tGu\",\"页面布局.md\":\"ByxvjOf0\",\"git.md\":\"CiZB2-Hi\",\"nginx.md\":\"CLg5G08y\",\"js.md\":\"ByNpo5U6\",\"composer.md\":\"DG9b_uff\",\"css.md\":\"CGTcNxn3\",\"es6.md\":\"WlZdqSNs\",\"thinkphp5.md\":\"CcZuUlif\",\"vue3.md\":\"BHHUaqjf\",\"html.md\":\"CQEGThVD\",\"sass.md\":\"lwBcy_PQ\",\"ts.md\":\"CrykCDmH\",\"node.md\":\"Bx01DVfD\",\"javascirpt.md\":\"VFCDtR7c\",\"jq.md\":\"PmLq5t9g\",\"react.md\":\"BD1tXhso\",\"echarts.md\":\"CqfICEkF\",\"laravel8.5.md\":\"GGYwgL9h\",\"案例.md\":\"CXbAG9mn\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"知否\",\"description\":\"Just playing around.\",\"base\":\"/dist/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"前端开发\",\"items\":[{\"text\":\"HTML\",\"link\":\"./html\"},{\"text\":\"CSS\",\"link\":\"./css\"},{\"text\":\"JavaScript\",\"link\":\"./js\"},{\"text\":\"ECMAScript6\",\"link\":\"./es6\"},{\"text\":\"TypeScript\",\"link\":\"./ts\"},{\"text\":\"Git\",\"link\":\"./git\"},{\"text\":\"React\",\"link\":\"./react\"},{\"text\":\"Vue2\",\"link\":\"./vue2\"},{\"text\":\"Vue3\",\"link\":\"./vue3\"},{\"text\":\"Node.js\",\"link\":\"./node\"},{\"text\":\"微信小程序开发\",\"link\":\"./小程序\"},{\"text\":\"UniApp\",\"link\":\"./uniapp\"},{\"text\":\"公众号开发\",\"link\":\"./公众号开发\"}]},{\"text\":\"PHP\",\"items\":[{\"text\":\"环境搭建\",\"link\":\"/PHP环境搭建\"},{\"text\":\"PHP语法\",\"link\":\"/PHP语法\"},{\"text\":\"Mysql\",\"link\":\"/mysql\"},{\"text\":\"PHP应用\",\"link\":\"/PHP应用\"},{\"text\":\"Composer\",\"link\":\"/Composer\"},{\"text\":\"Thinkphp5.0\",\"link\":\"/Thinkphp5\"},{\"text\":\"Laravel5.6\",\"link\":\"/Laravel8.5\"}]},{\"text\":\"网络技术\",\"items\":[{\"text\":\"TCP/IP协议\",\"link\":\"/tcpip\"},{\"text\":\"常见网络命令\",\"link\":\"/常见网络命令\"},{\"text\":\"计算机网络\",\"link\":\"/计算机网络\"}]},{\"text\":\"运维技术\",\"items\":[{\"text\":\"运维技术\",\"link\":\"/运维技术\"},{\"text\":\"AD域\",\"link\":\"/AD域\"}]},{\"text\":\"知识碎片\",\"items\":[{\"text\":\"页面布局\",\"link\":\"/页面布局\"},{\"text\":\"Grid 网格布局\",\"link\":\"/Grid\"},{\"text\":\"Flex 布局\",\"link\":\"/Flex布局\"},{\"text\":\"Less\",\"link\":\"/less\"},{\"text\":\"Sass\",\"link\":\"/Sass\"},{\"text\":\"Canvas\",\"link\":\"/canvas\"},{\"text\":\"JS文档\",\"link\":\"/JavaScirpt\"},{\"text\":\"Node环境搭建\",\"link\":\"/node环境\"},{\"text\":\"JQuery笔记\",\"link\":\"/jq\"},{\"text\":\"Echarts\",\"link\":\"/echarts\"},{\"text\":\"Nginx\",\"link\":\"/nginx\"},{\"text\":\"WordPress\",\"link\":\"/wordpress\"},{\"text\":\"Linux\",\"link\":\"/linux\"}]},{\"text\":\"资料分享\",\"items\":[{\"text\":\"TCP/IP协议\",\"link\":\"https://pan.baidu.com/s/1ZRR5l9UMSE99cwLruO9tbA#list/path=%2F\"},{\"text\":\"网络工程师\",\"link\":\"https://pan.baidu.com/s/1LAkV5vQZR1QSyUlv0V6tzQ#list/path=%2F\"},{\"text\":\"Linux镜像\",\"link\":\"https://pan.baidu.com/s/1mZ6v2Mv0clzMv5tT6_Sobg\"},{\"text\":\"Web开发电子书\",\"link\":\"https://pan.baidu.com/s/1tByRfM5z4vLywmTt206YZg\"},{\"text\":\"心理学电子书\",\"link\":\"https://pan.baidu.com/s/1zMu6k27Nc6dONGYU8HkC3g#list/path=%2F\"},{\"text\":\"摄影教程\",\"link\":\"https://pan.baidu.com/s/1xiefaWxBqawjg3amStiEKg#list/path=%2F\"},{\"text\":\"系统激活工具\",\"link\":\"https://pan.baidu.com/s/17o_LlD0vxgobMb7e1uXgew#list/path=%2F\"},{\"text\":\"office软件\",\"link\":\"https://pan.baidu.com/s/1rIBUwPMCTZfPaXI7_HDQ4Q#list/path=%2F\"},{\"text\":\"计算机维修教程\",\"link\":\"https://pan.baidu.com/s/1WSR2TY7-a7PqWB3gYDMv2Q#list/path=%2F\"},{\"text\":\"英语资料\",\"link\":\"https://pan.baidu.com/s/1q5OUrn1k2KTMo6ODU2p9cg#list/path=%2F\"},{\"text\":\"简历模板\",\"link\":\"https://pan.baidu.com/s/1PWLQ5T3PYL5af6Kfo_3NRg#list/path=%2F\"},{\"text\":\"教资\",\"link\":\"https://pan.baidu.com/s/1w0MpJVWiZG5DWj5JjuB74A#list/path=%2F\"},{\"text\":\"网络工程实战\",\"link\":\"https://pan.baidu.com/s/18rxOl7mgSa7jo_QNoXlVOQ#list/path=%2F\"},{\"text\":\"安防弱点资料\",\"link\":\"https://pan.baidu.com/s/1bgoxESvPMmjY6-qHFvj8TQ#list/path=%2F\"},{\"text\":\"Adobe软件\",\"link\":\"https://pan.baidu.com/s/1JWyRm9L_J1-tU5Ee18ud_Q#list/path=%2F\"},{\"text\":\"PPT模板\",\"link\":\"https://pan.baidu.com/s/1PXBqWDf4qtIjiVVlijxQtQ#list/path=%2F\"},{\"text\":\"软考系统集成\",\"link\":\"https://pan.baidu.com/s/1Y8q4vXkx9FUpi0U3a7rJKw\"},{\"text\":\"ChatGPT\",\"link\":\"/ChatGPT\"}]}],\"footer\":{\"message\":\"<a style=\\\"text-decoration: none;\\\" href=\\\"http://fxl.web3v.work/images/ewm1.jpg\\\">如有侵权请联系删除!</a>\",\"copyright\":\"知否 © 2010-2023\"}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
    
  </body>
</html>